<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>加载城市建筑-来着服务器托管数据</title>

<script src="./Cesium/Cesium.js"></script>


<style>
@import url("./Cesium/Widgets/widgets.css");

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#cesiumContainer {
	height: 95%;
}

h1 {
	heigth: 5%;
}
</style>
</head>
<body>
	
	<h1>加载城市建筑-来着服务器托管数据</h1>
	<div id="cesiumContainer"></div>
	<!-- <script>
	 var viewer = new Cesium.Viewer('cesiumContainer');
     var entity = viewer.entities.add({
    	// 22.5445042387,114.0872077942 bing地图华强北地图poi 经纬度
    	 //Google map huaqingbei lat and lon 22.5440904825,114.0854052726
         position: Cesium.Cartesian3.fromDegrees(114.0872077942, 22.5445042387),
         model: {
             //uri: '3Dmodels/Cesium_Air.glb'
            	 uri: '3Dmodels/models/WoodTower/Wood_Tower.gltf'
         }
     });
   viewer.trackedEntity = entity;

	
	
	
	</script> -->
	
	<script>
	
	
	// A demo of interactive 3D Tiles styling
	// Styling language Documentation: https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification/Styling
	// Building data courtesy of NYC OpenData portal: http://www1.nyc.gov/site/doitt/initiatives/3d-building.page
	var viewer = new Cesium.Viewer('cesiumContainer', {
	    terrainProvider: Cesium.createWorldTerrain()
	});

	viewer.scene.globe.depthTestAgainstTerrain = true;

	// Set the initial camera view to look at Manhattan
	var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);
	var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415);
	viewer.scene.camera.setView({
	    destination: initialPosition,
	    orientation: initialOrientation,
	    endTransform: Cesium.Matrix4.IDENTITY
	});

	// Load the NYC buildings tileset.
	var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(5741) });
	viewer.scene.primitives.add(tileset);

	// Color buildings based on their height.
	function colorByHeight() {
	    tileset.style = new Cesium.Cesium3DTileStyle({
	        color: {
	            conditions: [
	                ['${height} >= 300', 'rgba(45, 0, 75, 0.5)'],
	                ['${height} >= 200', 'rgb(102, 71, 151)'],
	                ['${height} >= 100', 'rgb(170, 162, 204)'],
	                ['${height} >= 50', 'rgb(224, 226, 238)'],
	                ['${height} >= 25', 'rgb(252, 230, 200)'],
	                ['${height} >= 10', 'rgb(248, 176, 87)'],
	                ['${height} >= 5', 'rgb(198, 106, 11)'],
	                ['true', 'rgb(127, 59, 8)']
	            ]
	        }
	    });
	}

	// Color buildings by their latitude coordinate.
	function colorByLatitude() {
	    tileset.style = new Cesium.Cesium3DTileStyle({
	        defines: {
	            latitudeRadians: 'radians(${latitude})'
	        },
	        color: {
	            conditions: [
	                ['${latitudeRadians} >= 0.7125', "color('purple')"],
	                ['${latitudeRadians} >= 0.712', "color('red')"],
	                ['${latitudeRadians} >= 0.7115', "color('orange')"],
	                ['${latitudeRadians} >= 0.711', "color('yellow')"],
	                ['${latitudeRadians} >= 0.7105', "color('lime')"],
	                ['${latitudeRadians} >= 0.710', "color('cyan')"],
	                ['true', "color('blue')"]
	            ]
	        }
	    });
	}

	// Color buildings by distance from a landmark.
	function colorByDistance() {
	    tileset.style = new Cesium.Cesium3DTileStyle({
	        defines : {
	            distance : 'distance(vec2(radians(${longitude}), radians(${latitude})), vec2(-1.291777521, 0.7105706624))'
	        },
	        color : {
	            conditions : [
	                ['${distance} > 0.0012',"color('gray')"],
	                ['${distance} > 0.0008', "mix(color('yellow'), color('red'), (${distance} - 0.008) / 0.0004)"],
	                ['${distance} > 0.0004', "mix(color('green'), color('yellow'), (${distance} - 0.0004) / 0.0004)"],
	                ['${distance} < 0.00001', "color('white')"],
	                ['true', "mix(color('blue'), color('green'), ${distance} / 0.0004)"]
	            ]
	        }
	    });
	}

	// Color buildings with a '3' in their name.
	function colorByNameRegex() {
	    tileset.style = new Cesium.Cesium3DTileStyle({
	        color : "(regExp('3').test(String(${name}))) ? color('cyan', 0.9) : color('purple', 0.1)"
	    });
	}

	// Show only buildings greater than 200 meters in height.
	function hideByHeight() {
	    tileset.style = new Cesium.Cesium3DTileStyle({
	        show : '${height} > 200'
	    });
	}

	/* Sandcastle.addToolbarMenu([{
	    text : 'Color By Height',
	    onselect : function() {
	        colorByHeight();
	    }
	}, {
	    text : 'Color By Latitude',
	    onselect : function() {
	        colorByLatitude();
	    }
	}, {
	    text : 'Color By Distance',
	    onselect : function() {
	        colorByDistance();
	    }
	}, {
	    text : 'Color By Name Regex',
	    onselect : function() {
	        colorByNameRegex();
	    }
	}, {
	    text : 'Hide By Height',
	    onselect : function() {
	        hideByHeight();
	    }
	}]);

	colorByHeight(); */


	
	
	
	
	</script>
	
	


</body>
</html>